<template>
	<a-drawer v-model:open="model" @close="close" :get-container="getContainer" :maskClosable="false" :width="width"
		:headerStyle="{ padding: '8px 16px' }" :bodyStyle="{ padding: '8px 16px' }" :keyboard="false">
		<template #closeIcon>
			<!-- 返回按钮 -->
			<el-button type="primary" text plain :icon="ArrowLeftBold" style="padding: 0 10px 0 15px;"></el-button>
		</template>
		<template #title>
			<!-- 自定义按钮和标题 -->
			<div style="display: flex;">
				<slot name="button"> </slot>
				<i style="flex: 1;"></i>
				<el-text type="primary" size="large"> {{ props.title }}</el-text>
				<i style="flex: 2;"></i>
			</div>
		</template>
		<template #extra>
			<!-- 全屏 -->
			<el-button type="primary" text plain :icon="getContainer ? Crop : FullScreen" style="padding: 0 0 0 5px;"
				@click="fullScreen" />
		</template>
		<slot>
		</slot>
	</a-drawer>
</template>
<script lang="ts" setup>
//嵌入父节点的抽屉, 通过show, close控制显示与隐藏, 自带关闭按钮, 点击遮罩层自动关闭
// 用法: 只能用ref, 不能用open属性控制抽屉的展开与关闭
// <MkBillList ref="drawerRef" > 内容 </MkBillList>
// drawerRef.value.show();
// drawerRef.value.close();
import { ref, computed } from 'vue';
// 基础抽屉组件,会自动嵌入在父窗口里面
// import { Drawer } from 'ant-design-vue';
import { Crop, FullScreen, ArrowLeftBold } from '@element-plus/icons-vue'
import { useWindowSize } from '@vueuse/core'

defineOptions({
	name: 'MkBillList'
})
// props
const props = defineProps({
	title: {
		type: String,
		default: ''
	},
	headerButton: {
		type: String,
		default: "all" // all: 显示取消和确定, none: 都不显示,  edit: 只显示编辑,  submit: 只显示确定,  edit|submit : 编辑和确定
	},
	parentWidth: {
		type: [Number, String],
		default: null // 默认可以为 null，表示不使用父组件宽度
	},
	defaultFullScreen: {
		type: Boolean,
		default: false // 默认不全屏
	}
})

const model = defineModel()
const getContainer = ref(props.defaultFullScreen) //是否嵌入父节点

const { width: windowWidth } = useWindowSize() //窗口大小

//设置宽度为: 窗口宽度 - 固定值
const width = computed(() => {
	if (getContainer.value) {
		return windowWidth.value; // 全屏模式仍然使用窗口宽度
	} else if (props.parentWidth !== null) {
		// 如果父组件传递了宽度，则使用父组件宽度减去固定值
		return `calc(${props.parentWidth} - 100px)`;
	} else {
		// 否则回退到使用窗口宽度减去固定值（作为备用，但通常希望有 parentWidth）
		return windowWidth.value - 390;
	}
});

const fullScreen = () => {
	getContainer.value = !getContainer.value;
}

const show = () => {
	model.value = true
}

//父组件主动关闭
const close = () => {
	model.value = false;
}

defineExpose({ show, close })

</script>
<style lang="scss" scoped></style>
